<template>
  <div class="creater-container">
    <el-table :data="list" stripe>
      <el-table-column prop="type" label="ID" width="100">
        <template slot-scope="scope">
          <el-tag size="medium">
            {{ scope.row.id }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="用户名"
        prop="username"
        width="100"
      ></el-table-column>
      <el-table-column
        label="昵称"
        prop="nickname"
        width="180"
      ></el-table-column>
      <el-table-column label="头像" width="180">
        <template slot-scope="scope">
          <el-image
            style="width: 140px; height: 100px"
            :src="scope.row.profilephoto"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="250"></el-table-column>
      <el-table-column prop="pageView" label="操作" width="300" fixed="right">
        <template slot-scope="scope">
          <el-popconfirm
            title="这是确定拒绝吗？"
            @onConfirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="danger">
              拒绝
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            title="这是确定通过吗？"
            @onConfirm="handlePass(scope.row.username)"
          >
            <el-button slot="reference" size="mini" type="success">
              通过
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
  import {
    getcreatedlist,
    getcreatedpass,
    getcreatedrefuse,
  } from "@/api/article";
  export default {
    name: "Creater",
    components: {},
    data() {
      return {
        list: [],
        queryForm: {
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
        imageList: [],
        background: true,
        layout: "total, prev, pager, next, jumper",
      };
    },
    created() {
      this.getData();
    },
    mounted() {},
    methods: {
      getData() {
        getcreatedlist(this.queryForm).then((res) => {
          this.list = [];
          res.data.forEach((item, index) => {
            this.list.push(item);
          });
          this.total = res.num;
          console.log(res);
        });
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val;
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          this.getData();
          loading.close();
        });
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val;
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          this.getData();
          loading.close();
        });
      },
      handleDelete(username) {
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          getcreatedrefuse({ username }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "拒绝成功",
                type: "success",
              });
              this.getData();
              loading.close();
            }
          });
        });
      },
      handlePass(username) {
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          getcreatedpass({ username }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "通过成功",
                type: "success",
              });
              this.getData();
              loading.close();
            }
          });
        });
      },
    },
  };
</script>
<style scoped>
  .el-button {
    margin-right: 20px;
  }
</style>
